<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE HTML>

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title>Canvas</title>
  
  <script type="text/javascript" src="../src/basis.js"></script>
  <script type="text/javascript" src="../src/basis/data.js"></script>
  <script type="text/javascript" src="../src/basis/dom.js"></script>
  <script type="text/javascript" src="../src/basis/dom/wrapper.js"></script>
  <script type="text/javascript" src="../src/basis/entity.js"></script>
  <script type="text/javascript" src="../src/basis/ui/canvas.js"></script>
  <script type="text/javascript" src="../src/basis/ui/graph.js"></script>
  <script type="text/javascript" src="../locale/ru/calendar.js"></script>

  <style type="text/css">
    CANVAS
    {
      b2ackground: #F0F0F0;
      b2order: 1px solid #E0E0E0;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    //
    // Example
    //

    var Value = new basis.entity.EntityType({
      name: 'Value',
      fields: {
        Date: String,
        Count: Number,
        Amount: Number
      }
    });

    var Count = new basis.entity.EntityType({
      name: 'Count',
      fields: {
        Date: String,
        Value: Number
      }
    });

    var Amount = new basis.entity.EntityType({
      name: 'Amount',
      fields: {
        Date: String,
        Value: Number
      }
    });

    var data = [
      { Date: '2007-06', Count: 74, Amount: 1121994.63 },
      { Date: '2007-07', Count: 198, Amount: 70962.07 },
      { Date: '2007-08', Count: 327, Amount: 88081.64 },
      { Date: '2007-09', Count: 1435, Amount: 200698.7201 },
      { Date: '2007-10', Count: 2457, Amount: 355995.1301 },
      { Date: '2007-11', Count: 3120, Amount: 573421.2369 },
      { Date: '2007-12', Count: 5363, Amount: 1100866.1546 },
      { Date: '2008-01', Count: 11489, Amount: 2257144.699 },
      { Date: '2008-02', Count: 6303, Amount: 1471009.255 },
      { Date: '2008-03', Count: 5350, Amount: 1241891.353 },
      { Date: '2008-04', Count: 5774, Amount: 1862811.7237 },
      { Date: '2008-05', Count: 6995, Amount: 2390120.9235 },
      { Date: '2008-06', Count: 7294, Amount: 3256698.869 },
      { Date: '2008-07', Count: 6329, Amount: 2693387.0928 },
      { Date: '2008-08', Count: 7142, Amount: 3548683.748 },
      { Date: '2008-09', Count: 7810, Amount: 3880152.1971 },
      { Date: '2008-10', Count: 9862, Amount: 5666892.3515 },
      { Date: '2008-11', Count: 11221, Amount: 7444031.105 },
      { Date: '2008-12', Count: 14711, Amount: 9185893.4233 },
      { Date: '2009-01', Count: 13431, Amount: 7252555.3577 },
      { Date: '2009-02', Count: 12176, Amount: 6908588.6769 },
      { Date: '2009-03', Count: 12446, Amount: 7214006.0416 },
      { Date: '2009-04', Count: 12841, Amount: 6896383.4796 },
      { Date: '2009-05', Count: 13169, Amount: 7716787.7293 },
      { Date: '2009-06', Count: 13129, Amount: 7235950.6821 },
      { Date: '2009-07', Count: 13209, Amount: 7692433.0406 },
      { Date: '2009-08', Count: 14179, Amount: 7962404.4703 },
      { Date: '2009-09', Count: 15813, Amount: 9714701.8796 },
      { Date: '2009-10', Count: 15864, Amount: 9685311.0652 },
      { Date: '2009-11', Count: 15995, Amount: 9709073.3398 },
      { Date: '2009-12', Count: 18508, Amount: 12218506.7115 },
      { Date: '2010-01', Count: 18638, Amount: 10922637.8022 },
      { Date: '2010-02', Count: 18935, Amount: 12037523.1901 },
      { Date: '2010-03', Count: 27413, Amount: 14279206.1383 },
      { Date: '2010-04', Count: 25811, Amount: 13814033.711 },
      { Date: '2010-05', Count: 27830, Amount: 15885733.0432 },
      { Date: '2010-06', Count: 24076, Amount: 16612653.6971 },
      { Date: '2010-07', Count: 21680, Amount: 18416644.8046 },
      { Date: '2010-08', Count: 22715, Amount: 22899617.5211 },
      { Date: '2010-09', Count: 24833, Amount: 24641747.4133 }, /**/
      //{ Date: '2010-10', Count: 11337, Amount: 10062840.6528 }
    ];

    Value.all.sync(data);

    Count.all.sync(data.map(function(object){
      return {
        Date: object.Date,
        Value: object.Count
      }
    }));
    Amount.all.sync(data.map(function(object){
      return {
        Date: object.Date,
        Value: object.Amount
      }
    }));

    // terminals

    var Terminal = new basis.entity.EntityType({
      name: 'Terminal',
      fields: {
        TerminalId: basis.entity.StringId
      }
    });

    var TerminalReport = new basis.entity.EntityType({
      name: 'TerminalReport',
      fields: {
        Date: String,
        Terminal: Terminal,
        Count: Number
      },
      aliases: {
        TerminalId: 'Terminal'
      },
      groupings: {
        Terminal: Function.getter('data.Terminal.getId()')
      }
    });


    var terminalReportData = [
      { TerminalId: 'africa1', Date: '2007-06', Count: 5363 },
      { TerminalId: 'africa1', Date: '2007-07', Count: 11489 },
      { TerminalId: 'africa1', Date: '2007-08', Count: 6303 },
      { TerminalId: 'africa1', Date: '2007-09', Count: 5350 },
      { TerminalId: 'africa1', Date: '2007-10', Count: 5774 },
      { TerminalId: 'africa1', Date: '2007-11', Count: 14711 },
      { TerminalId: 'africa1', Date: '2007-12', Count: 13431 },
      { TerminalId: 'africa1', Date: '2008-01', Count: 12176 },
      { TerminalId: 'africa1', Date: '2008-02', Count: 12446 },
      { TerminalId: 'africa1', Date: '2008-03', Count: 12841 },
      { TerminalId: 'africa1', Date: '2008-04', Count: 24076 },
      { TerminalId: 'africa1', Date: '2008-05', Count: 21680 },
      { TerminalId: 'africa1', Date: '2008-06', Count: 22715 },
      { TerminalId: 'africa1', Date: '2008-07', Count: 24833 },/**/

      { TerminalId: 'africa2', Date: '2007-06', Count: 6303 },
      { TerminalId: 'africa2', Date: '2007-07', Count: 5350 },
      { TerminalId: 'africa2', Date: '2007-08', Count: 5774 },
      { TerminalId: 'africa2', Date: '2007-09', Count: 6995 },
      { TerminalId: 'africa2', Date: '2007-10', Count: 7294 },
      { TerminalId: 'africa2', Date: '2007-11', Count: 25811 },
      { TerminalId: 'africa2', Date: '2007-12', Count: 27830 },
      { TerminalId: 'africa2', Date: '2008-01', Count: 24076 },
      { TerminalId: 'africa2', Date: '2008-02', Count: 21680 },
      { TerminalId: 'africa2', Date: '2008-03', Count: 14711 },
      { TerminalId: 'africa2', Date: '2008-04', Count: 13431 },
      { TerminalId: 'africa2', Date: '2008-05', Count: 12176 },
      { TerminalId: 'africa2', Date: '2008-06', Count: 12446 },
      { TerminalId: 'africa2', Date: '2008-07', Count: 24076 }/**/
    ]

    terminalReportData.map(TerminalReport.reader).map(TerminalReport);


    var gg = new basis.ui.graph.Graph({
      container: document.body,
      width: 800,
      height: 450,

      propGetter: function(object){
        var date = new Date(object.data.Date);
        return basis.locale['ui.calendar'].MONTH.SHORT[date.getMonth()].toLowerCase() + ' ' + date.getFullYear();
      },
      
      // 1. single thread
      /*showLegend: false,
      childNodes: [
        {
          valueGetter: Function.getter('data.Amount'),
          legend: 'Сумма платежей',
          color: '#777',
          dataSource: Value.all,
          localSorting: Function.getter('data.Date')
        }
      ],/**/

      // 2. multi thread
      /*childNodes: [
        {
          legend: 'Сумма платежей',
          color: '#777',
          dataSource: Amount.all,
        },
        {
          legend: 'Количество платежей',
          color: '#0055FF',
          dataSource: Count.all,
        }
      ],
      childClass: {
        valueGetter: Function.getter('data.Value'),
        localSorting: Function.getter('data.Date')        
      }/**/

      // 3. multi thread with dataSource control 
      dataSource: Terminal.all,
      childClass: {
        dataSourceGetter: function(object){
          return TerminalReport.getGrouping('Terminal').getSubset(object.data.TerminalId);
        },
        legendGetter: function(object){
          return object.data.TerminalId;
        },
        valueGetter: Function.getter('data.Count'),
        localSorting: Function.getter('data.Date')
      }/**/
    });

  </script>
</body>

</html>